<script setup>
import { ref } from 'vue';
const tabal = ref([]);
const input = ref('');
const drawer = ref(false)


const doinput = () => {
    fetch("http://localhost:3000/xiaolanshu?id=" + input.value,
        { method: 'get' })
        .then(res => res.json()).then((data) => {
            tabal.value = data;
            console.log(tabal.value);

        })
}
</script>



<template>
    <div class="header">
        <div class="header-logo">
            <a href="#" class="header-logo">
                <img src="../../assets/image/1.png" alt="">
            </a>
            <div class="header-input">
                <input type="text" v-model="input" placeholder="请输入搜索内容">
                <button class="iconfont icon-search" style="font-size: 20px;" @click=doinput></button>
            </div>
            <div class="header-right">
                <el-button class="iconfont icon-menu" style="list-style:none; margin-left: 16px" type="primary"  @click="drawer = true">
                </el-button>
                <el-drawer v-model="drawer" title="I am the title" :with-header="false">
                    <li>设置</li>
                    <li>收藏</li>
                    <li>历史</li>
                    <li>退出</li>
                </el-drawer>
            </div>
        </div>
    </div>
</template>